<template>
  <div class="dashboard-container">
    <!-- 第一行 5个卡片 -->
    <el-row :gutter="20" class="stats-row first-row">
      <el-col :xs="24" :sm="12" :md="4.8" :lg="4.8" class="custom-col" v-for="(item, index) in firstRowItems" :key="index">
        <el-card shadow="hover" class="stats-card">
          <div class="card-item">
            <div :class="['card-icon', item.iconClass]">
              <i :class="item.icon"></i>
            </div>
            <div class="card-info">
              <div class="label">{{ item.label }}</div>
              <div class="value">{{ stats[item.key] }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行 4个卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6" v-for="(item, index) in secondRowItems" :key="index">
        <el-card shadow="hover" class="stats-card">
          <div class="card-item">
            <div :class="['card-icon', item.iconClass]">
              <i :class="item.icon"></i>
            </div>
            <div class="card-info">
              <div class="label">{{ item.label }}</div>
              <div class="value">{{ stats[item.key] }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第三行 4个卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6" v-for="(item, index) in thirdRowItems" :key="index">
        <el-card shadow="hover" class="stats-card">
          <div class="card-item">
            <div :class="['card-icon', item.iconClass]">
              <i :class="item.icon"></i>
            </div>
            <div class="card-info">
              <div class="label">{{ item.label }}</div>
              <div class="value">{{ stats[item.key] }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 原温湿度图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card shadow="hover" class="slogan-card">
          <div class="slogan-main">
            <i class="el-icon-connection"></i>
            <h2>用心服务每一亩良田</h2>
            <p class="sub-slogan">构建烟农与合作社的数字化桥梁</p>
          </div>
          
          <el-row :gutter="20" class="service-items">
            <el-col :span="8">
              <div class="service-item">
                <div class="icon-wrapper planting">
                  <i class="el-icon-takeaway-box"></i>
                </div>
                <h3>种植计划指导</h3>
                <p>科学规划种植面积<br>精准匹配育苗资源</p>
              </div>
            </el-col>
            
            <el-col :span="8">
              <div class="service-item">
                <div class="icon-wrapper process">
                  <i class="el-icon-guide"></i>
                </div>
                <h3>全程种植跟踪</h3>
                <p>育苗移栽实时监测<br>烘烤分级全程追溯</p>
              </div>
            </el-col>
            
            <el-col :span="8">
              <div class="service-item">
                <div class="icon-wrapper support">
                  <i class="el-icon-phone-outline"></i>
                </div>
                <h3>全天候技术支持</h3>
                <p>专家团队在线支持<br>快速响应生产需求</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'DashboardView',
  components: {
  },
  data() {
    return {
      stats: {
        nurseryCount: 0,
        stationCount: 0,
        townCount: 0,
        villageGroupCount: 0,
        farmerCount: 0,
        sensorCount: 0,
        planCount: 0,
        seedlingCount: 0,
        employeeCount: 0,
        pesticideArea: 0,
        transplantArea: 0,
        roastCount: 0,
        gradeCount: 0
      },
      tempChartOptions: {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [{
          data: [23, 24, 25, 26, 25, 24, 23],
          type: 'line',
          smooth: true,
          itemStyle: {
            color: '#409EFF'
          }
        }]
      },
      humidityChartOptions: {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          }
        },
        series: [{
          data: [65, 68, 70, 72, 71, 69, 67],
          type: 'line',
          smooth: true,
          itemStyle: {
            color: '#67C23A'
          }
        }]
      },
      statsItems: [
        { label: '育苗点数量', key: 'nurseryCount', icon: 'el-icon-s-home', iconClass: 'nursery' },
        { label: '烟站数量', key: 'stationCount', icon: 'el-icon-office-building', iconClass: 'station' },
        { label: '乡镇数量', key: 'townCount', icon: 'el-icon-location', iconClass: 'town' },
        { label: '乡村组数量', key: 'villageGroupCount', icon: 'el-icon-s-grid', iconClass: 'village' },
        { label: '员工数量', key: 'employeeCount', icon: 'el-icon-user-solid', iconClass: 'employee' },
        
        { label: '传感器数量', key: 'sensorCount', icon: 'el-icon-data-line', iconClass: 'sensor' },
        { label: '农户数量', key: 'farmerCount', icon: 'el-icon-user', iconClass: 'farmer' },
        { label: '种植计划条数', key: 'planCount', icon: 'el-icon-s-order', iconClass: 'planting' },
        { label: '发苗申请次数', key: 'seedlingCount', icon: 'el-icon-truck', iconClass: 'seedling' },
        
        { label: '移栽面积(亩)', key: 'transplantArea', icon: 'el-icon-s-promotion', iconClass: 'transplant' },
        { label: '打药面积(亩)', key: 'pesticideArea', icon: 'el-icon-medal', iconClass: 'pesticide' },
        { label: '烘烤数量', key: 'roastCount', icon: 'el-icon-hot-water', iconClass: 'roast' },
        { label: '分级数量', key: 'gradeCount', icon: 'el-icon-sort', iconClass: 'grade' }
      ]
    }
  },
  computed: {
    // 第一行 5个卡片
    firstRowItems() {
      return this.statsItems.slice(0, 5)
    },
    // 第二行 4个卡片
    secondRowItems() {
      return this.statsItems.slice(5, 9)
    },
    // 第三行 4个卡片
    thirdRowItems() {
      return this.statsItems.slice(9, 13)
    }
  },
  methods: {
    // 获取烟站数量
    async fetchStationCount() {
      try {
        const response = await request.get('/departments/page', {
          params: {
            current: 1,
            size: 1,
            deptType: 1 // 烟站类型
          }
        })
        this.stats.stationCount = response.total
      } catch (error) {
        console.error('获取烟站数量失败:', error)
        this.$message.error('获取烟站数量失败')
      }
    },

    // 获取育苗点数量
    async fetchNurseryCount() {
      try {
        const response = await request.get('/departments/page', {
          params: {
            current: 1,
            size: 1,
            deptType: 4 // 育苗点类型
          }
        })
        this.stats.nurseryCount = response.total
      } catch (error) {
        console.error('获取育苗点数量失败:', error)
        this.$message.error('获取育苗点数量失败')
      }
    },

    // 获取乡镇数量
    async fetchTownCount() {
      try {
        const response = await request.get('/departments/page', {
          params: {
            current: 1,
            size: 1,
            deptType: 2 // 乡镇类型
          }
        })
        this.stats.townCount = response.total
      } catch (error) {
        console.error('获取乡镇数量失败:', error)
        this.$message.error('获取乡镇数量失败')
      }
    },

    // 获取乡村组数量
    async fetchVillageGroupCount() {
      try {
        const response = await request.get('/departments/page', {
          params: {
            current: 1,
            size: 1,
            deptType: 3 // 乡村组类型
          }
        })
        this.stats.villageGroupCount = response.total
      } catch (error) {
        console.error('获取乡村组数量失败:', error)
        this.$message.error('获取乡村组数量失败')
      }
    },

    // 获取农户数量
    async fetchFarmerCount() {
      try {
        const response = await request.get('/growers/count')
      this.stats.farmerCount = response
      } catch (error) {
        console.error('获取农户数量失败:', error)
        this.$message.error('获取农户数量失败')
      }
    },

    // 获取传感器数量
    async fetchSensorCount() {
      const response = await request.get('/sensors')
      this.stats.sensorCount = response.length
    },

    // 获取种植计划数量
    async fetchPlanCount() {
      try {
        const response = await request.get('/cultivate/stats/plan');
        this.stats.planCount = response[0].totalCount;
      } catch (error) {
        console.error('获取种植计划数量失败:', error);
        this.$message.error('获取种植计划数量失败');
      }
    },

    // 获取发苗数量
    async fetchSeedlingCount() {
      try {
        const response = await request.get('/cultivate/stats/demand');
        this.stats.seedlingCount = response[0].totalCount;
      } catch (error) {
        console.error('获取发苗数量失败:', error);
        this.$message.error('获取发苗数量失败');
      }
    },

    // 获取员工数量
    async fetchEmployeeCount() {
      try {
        const response = await request.get('/employees/count');
        this.stats.employeeCount = response;
      } catch (error) {
        console.error('获取员工数量失败:', error);
        this.$message.error('获取员工数量失败');
      }
    },

    // 获取打药面积
    async fetchPesticideArea() {
      try {
        const response = await request.get('/pesticide-records/sum?field=area');
        this.stats.pesticideArea = response.sum;
      } catch (error) {
        console.error('获取打药面积失败:', error);
        this.$message.error('获取打药面积失败');
      }
    },

    // 获取移栽面积
    async fetchTransplantArea() {
      try {
        const response = await request.get('/transplant-records/sum');
        this.stats.transplantArea = response.total;
      } catch (error) {
        console.error('获取移栽面积失败:', error);
        this.$message.error('获取移栽面积失败');
      }
    },

    // 获取烘烤数量
    async fetchRoastCount() {
      try {
        const response = await request.get('/roasting-records/count');
        this.stats.roastCount = response.total;
      } catch (error) {
        console.error('获取烘烤数量失败:', error);
        this.$message.error('获取烘烤数量失败');
      }
    },

    // 获取分级数量
    async fetchGradeCount() {
      try {
        const response = await request.get('/grading-records/sum');
        this.stats.gradeCount = response.total;
      } catch (error) {
        console.error('获取分级数量失败:', error);
        this.$message.error('获取分级数量失败');
      }
    },

    // 统一获取所有数据
    async fetchAllStats() {
      await Promise.all([
        this.fetchStationCount(),
        this.fetchNurseryCount(),
        this.fetchTownCount(),
        this.fetchVillageGroupCount(),
        this.fetchFarmerCount(),
        this.fetchSensorCount(),
        this.fetchPlanCount(),
        this.fetchSeedlingCount(),
        this.fetchEmployeeCount(),
        // this.fetchPesticideArea(),
        // this.fetchTransplantArea(),
        
      ])
    }
  },
  created() {
    this.fetchAllStats()
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  background-color: #f0f2f5;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

.first-row {
  .custom-col {
    width: 20% !important;
    padding: 10px;
    box-sizing: border-box;
  }
}

.stats-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px 20px -10px;
  
  &:last-child {
    margin-bottom: 0;
  }

  .el-col {
    &:not(.custom-col) {
      width: 25% !important;
      padding: 10px;
      box-sizing: border-box;
    }
  }
}

.stats-card {
  height: 100%;
  
  .card-item {
    display: flex;
    align-items: center;
    padding: 15px;
  }
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;

  i {
    font-size: 30px;
    color: #fff;
  }

  &.nursery { background: #409EFF; }
  &.station { background: #67C23A; }
  &.town { background: #E6A23C; }
  &.village { background: #F56C6C; }
  &.farmer { background: #bb4c27; }
  &.sensor { background: #9B59B6; }
  &.planting { background: #3963BC; }
  &.seedling { background: #36B368; }
  &.employee { background: #F06B4D; }
  &.pesticide { background: #6B7B8C; }
  &.transplant { background: #E6A23C; }
  &.roast { background: #F56C6C; }
  &.grade { background: #8E44AD; }
}

.card-info {
  flex-grow: 1;
  
  .label {
    font-size: 13px;
    color: #909399;
    margin-bottom: 8px;
    white-space: nowrap;
  }
  
  .value {
    font-size: 20px;
    font-weight: bold;
    color: #303133;
  }
}

// 响应式布局
@media screen and (max-width: 1400px) {
  .stats-container .el-col {
    width: 25% !important;  // 4列
  }
}

@media screen and (max-width: 1200px) {
  .stats-container .el-col {
    width: 33.33% !important;  // 3列
  }
}

@media screen and (max-width: 768px) {
  .stats-container .el-col {
    width: 50% !important;  // 2列
  }
}

.chart-row {
  margin-top: 20px;
}
.slogan-card {
  .el-card__body {
    padding: 30px;
  }
}

.slogan-main {
  text-align: center;
  margin-bottom: 40px;
  
  i {
    font-size: 60px;
    color: #67C23A;
    margin-bottom: 20px;
  }
  
  h2 {
    font-size: 28px;
    color: #303133;
    margin: 15px 0;
  }
  
  .sub-slogan {
    color: #909399;
    font-size: 16px;
  }
}

.service-items {
  margin-top: 30px;
  
  .service-item {
    padding: 20px;
    text-align: center;
    
    h3 {
      color: #303133;
      margin: 15px 0;
      font-size: 18px;
    }
    
    p {
      color: #606266;
      line-height: 1.8;
      font-size: 14px;
    }
  }
}

.icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  
  i {
    font-size: 40px;
    color: white;
  }
  
  &.planting { background: #409EFF; }
  &.process { background: #E6A23C; }
  &.support { background: #F56C6C; }
}
</style>